import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getSizeImageXY } from "@/utils/format-utils";
import Pagination from "../../../../../components/pagination";
import { getArtistMVAction } from "../../../store/actionTypes";
import { NavLink } from "react-router-dom";

export default memo(function ArtistMvInfo(props) {
  const dispatch = useDispatch();
  const [pageState, setPageState] = useState(1);

  useEffect(() => {
    dispatch(getArtistMVAction(props.id, 12, (pageState - 1) * 12));
  }, [dispatch, props.id, pageState]);

  const { artistMv } = useSelector(
    (state) => ({
      artistMv: state.getIn(["artistPage", "artistMV"]),
    }),
    shallowEqual
  );

  const artistMvInfo = artistMv.code !== undefined && artistMv;

  // (artistMv)
  return (
    <div className="artist-mv">
      {artistMvInfo ? (
        artistMvInfo.mvs.length !== 0 ? (
          artistMvInfo.mvs.slice(0, 12).map((item, index) => {
            return (
              <div key={item.id} className="artist-mv-img-box fl">
                <div className="artist-mv-img">
                  <NavLink
                    to={{
                      pathname: "/mv",
                      search: "?id=" + item.id,
                    }}
                  >
                    <img src={getSizeImageXY(item.imgurl, 137, 103)} alt="" />
                    <a className="msk-a coverall"> </a>
                    <a className="mv-play"> </a>
                  </NavLink>
                </div>
                <p>
                  <NavLink
                    to={{
                      pathname: "/mv",
                      search: "?id=" + item.id,
                    }}
                  >
                    {item.name}
                  </NavLink>
                </p>
              </div>
            );
          })
        ) : (
          <div className="n-nmusic">
            <h3 className="n-music-h3">
              <i className="u-music-h3-i"></i>
              暂无专辑!
            </h3>
          </div>
        )
      ) : (
        ""
      )}
      {/* {artistAlbumsInfo?artistAlbumsInfo.artist.albumSize>12?<Pagination size={12} page={pageState} getPage={getPage} total={artistAlbumsInfo?artistAlbumsInfo.artist.albumSize:""}/>:"":""} */}
    </div>
  );
});
